<template>
  <main class="c-topic" >
    <div v-if="media && !loading"> 
      <section class="c-topic_item ">
        <div class="c-topic_brand D3media" :style="`background-image: url(${media.picUrl})`" >
          <img :src="media.picUrl" class= "toptic-media " >
        </div>
        <div class="c-topic__brand-mask"></div>
        <div class="mes-box">
          <h3 class="mes-box_title">
            {{ media.title }} 
            <span class="mes-box_subtitle" v-if="media.list">{{ media.list.length }}个视频</span>
          </h3>
          <p class="mes-box_mes ">
            {{media.intro}}
          </p>
        </div>
      </section>
      <section class="c-topic_item gutter" v-for="item in media.list" v-if="media.list">
        <div class="c-topic_brand responsively-lazy" :style="`background-image: url(${item.picUrl})`">
          <img :src="item.picUrl" :alt="item.title" :srcset="blankPic" />
        </div>
        <div class="mes-box c-topic_box">
          <h3 class="mes-box_title">{{ item.title || item.subtitle }}</h3>
          <p class="c-topic_labels" >
            <span v-text="item.duration">duration</span>
            <span class="c-media_separator">|</span>
            <span> {{  item.playCount}}人播放</span>
          </p>
        </div>
      </section>
    </div>
    <div v-else class="err-tip-contain">
      <div class="spinner" v-if="loading"></div>        
      <p v-else>地址错误，请访问正确地址</p>
    </div>
    <global-footer :free="isFree" :price="media.price"></global-footer>
  </main>
</template>
<script>
  import setFalse from 'ployfill/';
  import topic from 'services/charges-topic';
  import GlobalFooter from 'components/global-footer';
  import { sharewx } from 'services/sharewx';
  import holder from 'common/images/holderplace.jpg';

  export default {
    components: { GlobalFooter },
    data () {
      return {
        media: {},
        mediaBigPic: {
          backgroundImage: ''
        },
        loading: true,
        blankPic: holder,
        isFree: true
      };
    },
    mounted () {
      topic.get().then((data) => {
        if (data) {
          this.loading = false;
          this.media = data;
          this.mediaBigPic.backgroundImage = `url(${data.picUrl})`;
          this.relatedMedia = data.relatedList;
          document.title = `${data.title}`;
          document.head.querySelector('meta[name="description"]').content = data.intro;
          setTimeout(() => {
            sharewx({
              title: data.title,
              imgUrl: data.picUrl,
              desc: data.intro
            });
          }, 200);
        }
      }).catch(() => {
        this.loading = setFalse();
      });
    }
  };
</script>

<style lang="scss" scoped>
  @import "~common/style/variables";
  .c-topic_brand {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    img {
      z-index: -1;
      width: 0;
    }
  }
  .c-topic_item {
    &.gutter {
      @include base-backgroundcolor(100%, 1);
      padding-left: .42rem;
      padding-right: .42rem;
    }
    .mes-box_subtitle {
      padding-left: .3rem;
      font-size: .36rem;
      color: $font-color7;
      font-weight: 400;
    }
  }
  .mes-box_mes {
    padding-bottom: .6rem;
    color: $font-color7;
  }
  .c-topic_box {
    @include base-backgroundcolor(100%, 1);
    padding: 0 0 .6rem;
    .mes-box_title {
      margin: 0;
      padding: .24rem 0 .15rem;
      font-size: .42rem;
      font-weight: 600;
    }
    .c-topic_labels {
      font-size: .33rem;
      color: $font-color7;
    }
  }
  .topic-play_icon {
    display: inline-block;
    position: absolute;
    right: .24rem;
    top: 5rem;
    z-index: 10;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('~common/images/play-normal.png');
    background-size: cover;
    &.hover,
    &.active {
      background-image: url('~common/images/play-hover.png')
    }
  }
  .c-topic__brand-mask {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: rgba(0, 0, 0, .2);
  }
</style>
